<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Logo</title>
    <meta name="description" content="A-Frame Logo - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene vr-mode-ui="enabled: false">
      <a-assets>
        <a-asset-item id="tree" src="../../assets/models/tree1/tree1.dae"></a-asset-item>
      </a-assets>

      <!-- Quasi-isometric camera -->
      <a-entity>
        <a-animation attribute="position" from="0 5 0" to="0 0 0" dur="4000"
                     easing="ease-out"></a-animation>
        <a-camera id="camera" near="1000" far="4000" position="0 880 1290" fov="2.2"
                  rotation="-34 0 0" wasd-controls-enabled="false"
                  look-controls-enabled="false"></a-camera>
      </a-entity>

      <a-entity id="logo" rotation="0 45 0">
        <!-- Right side -->
        <a-entity rotation="-20 0 0" position="0 0 10.75" scale="1 0 1">
          <a-animation attribute="scale" to="1 1 1" begin="200" dur="1000"
                       easing="ease-out"></a-animation>
          <a-box width="12.5" depth="1" height="30" color="#EF2D5E" position="0 15 0">

            <!-- Left side -->
            <a-entity rotation="-140 0 0" position="0 15 0" scale="1 0 1">
              <a-animation attribute="scale" to="1 1 1" begin="800" dur="800"
                           easing="ease-out"></a-animation>
              <a-box width="12.49" depth=".1" height="30" color="#24CAFF"
                      position="0 15 -.52" shader="flat"></a-box>
              <a-box width="12.5" depth="1" height="30" color="#EF2D5E"
                      position="0 15 0"></a-box>
            </a-entity>
          </a-box>
        </a-entity>

        <!-- Cross-bar -->
        <a-entity rotation="-90 0 0" position="0 8 7.5" scale="1 0 1">
          <a-animation attribute="scale" to="1 1 1" begin="800" dur="600"
                       easing="ease-out"></a-animation>
          <a-box width="12.45" depth=".1" height="14" color="#F2E646"
                 position="0 7 .52" shader="flat"></a-box>
          <a-box width="12.5" depth="1" height="14" color="#EF2D5E"
                 position="0 7 0"></a-box>
        </a-entity>

        <!-- Clouds -->
        <a-entity>
          <!-- Large, foreground -->
          <a-box color="white" opacity="0.25" width="18" depth="28" height="6">
            <a-animation attribute="position" from="-280 240 180" to="-280 240 340" begin="0"
                         dur="36000" easing="linear" repeat="indefinite"
                         fill="both"></a-animation>
          </a-box>

          <a-box color="white" opacity="0.65" width="8" depth="12" height="4">
            <a-animation attribute="position" from="5 32 -80" to="5 32 120" begin="12000"
                         dur="48000" easing="linear" repeat="indefinite"
                         fill="both"></a-animation>
          </a-box>

          <!-- Behind the A -->
          <a-box color="white" opacity="0.75" width="6" depth="9" height="4" visible="false">
            <a-animation attribute="position" from="10 12 -10" to="10 12 100" begin="1000"
                         dur="36000" easing="linear" repeat="indefinite"
                         fill="both"></a-animation>
            <a-animation attribute="visible" to="true" begin="1000" dur="1"></a-animation>
          </a-box>

          <a-box color="white" opacity="0.5" width="8" depth="12" height="3">
            <a-animation attribute="position" from="20 16 -80" to="20 16 120" begin="200"
                         dur="52000" easing="linear" repeat="indefinite"
                         fill="both"></a-animation>
          </a-box>

          <a-box color="white" opacity="0.8" width="8" depth="12" height="3">
            <a-animation attribute="position" from="-20 18 -50" to="-20 18 120" begin="200"
                         dur="50000" easing="linear" repeat="indefinite"
                         fill="both"></a-animation>
          </a-box>

          <a-box color="white" opacity="0.75" width="5" depth="7" height="3">
            <a-animation attribute="position" from="26 20 -80" to="26 20 120" begin="20000"
                         dur="48000" easing="linear" repeat="indefinite"
                         fill="both"></a-animation>
          </a-box>
        </a-entity>

        <!-- Shadow -->
        <a-entity rotation="-90 0 0">
          <a-plane width="12.5" height="20" position="0 0 0.1" pivot="0 -10 0"
                   color="#21897C">
            <a-animation attribute="scale" from="1 0 1" to="1 1 1" easing="ease-out"
                         begin="600" dur="1000" fill="both"></a-animation>
          </a-plane>
        </a-entity>

        <!-- Base -->
        <a-entity>
          <a-plane width="30" height="30" color="#249889" rotation="-90 0 0">
            <a-animation attribute="position" from="0 -40 0" to="0 0 0" dur="1600"
                         easing="ease-out"></a-animation>
          </a-plane>
        </a-entity>

        <!-- Trees -->
        <a-entity position="-10 0.2 -10">
          <a-collada-model src="#tree" scale="2.5 2.5 2.5" visible="false">
            <a-animation attribute="position" from="0 10 0" to="0 0 0" begin="650" dur="800"
                         easing="ease-out" fill="backwards"></a-animation>
            <a-animation attribute="visible" to="true" begin="800" dur="1"></a-animation>
          </a-collada-model>
        </a-entity>

        <a-entity position="-10 0.2 6">
          <a-collada-model src="#tree" scale="2.5 2.5 2.5" visible="false">
            <a-animation attribute="position" from="0 10 0" to="0 0 0" begin="400" dur="800"
                         easing="ease-out" fill="backwards"></a-animation>
            <a-animation attribute="visible" to="true" begin="400" dur="1"></a-animation>
          </a-collada-model>
        </a-entity>

        <a-entity position="10 0.2 10">
          <a-collada-model src="#tree" scale="2.5 2.5 2.5" visible="false">
            <a-animation attribute="position" from="0 10 0" to="0 0 0" begin="600" dur="800"
                         easing="ease-out" fill="backwards"></a-animation>
            <a-animation attribute="visible" to="true" begin="600" dur="1"></a-animation>
          </a-collada-model>
        </a-entity>
      </a-entity>

      <a-sky color="#24CAFF" radius="1000"></a-sky>
      <a-light type="directional" color="#FFF" intensity="0.45" position="4 2 1"></a-light>
      <a-light type="ambient" color="#A8A8A8"></a-light>

    </a-scene>
  </body>
</html>
